<template>
    <div :id="`UEDITOR-${name}`"></div>
</template>

<script>
    const UEDITOR_HOME_URL = "https://file.open.banchengyun.com/ueditor/";
    import Config from '@/config'
    export default {
        props: {
            content: {
                type: String,
                default: ''
            },
            name: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                ts: Date.now(),
                myConfig: {
                    serverUrl: `${Config.baseUrl}/ueditor`,
                    initialFrameWidth: '100%',
                    initialFrameHeight: '500',
                    UEDITOR_HOME_URL,
                    autoHeightEnabled: false,
                    autoFloatEnabled:false,
                    toolbars: [[
                        'fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                        'directionalityltr', 'directionalityrtl', 'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                        'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                        'simpleupload', 'attachment', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                        'horizontal', 'date', 'time', 'snapscreen', 'wordimage', '|',
                        'insertrow', 'deleterow', 'insertcol', 'deletecol', 'splittocols', '|',
                        'searchreplace', 'drafts'
                    ]],
                },
            };
        },
        methods: {
            loadUeditor() {
                function wrap(url) {
                    return new Promise(resolve => {
                        // let index = document.scripts.findIndex((item) => item.src == 'https://file.open.banchengyun.com/ueditor/ueditor.config.js')
                        // if(index != -1){ resolve }
                        let dom = document.createElement("script");
                        dom.src = UEDITOR_HOME_URL + url;
                        dom.onload = resolve;
                        document.body.append(dom);
                    });
                }

                return wrap("ueditor.all.js").then(wrap("ueditor.config.js"));
            },
            initUE(){
                window.UEDITOR_CONFIG = Object.assign(window.UEDITOR_CONFIG, {
                    xssFilterRules: false,
                    //input xss过滤
                    inputXssFilter: false,
                    //output xss过滤
                    outputXssFilter: false,
                    
                    // 关闭右键菜单
                    enableContextMenu: false
                })
                setTimeout(() => {
                    this.$UEditor = UE.getEditor(
                        'UEDITOR-' + this.name,
                        this.myConfig
                    );

                    this.$UEditor.ready(() => {
                        if(!this.content){ return; }
                        this.$UEditor.setContent(this.content);
                    });

                    clearTimeout(this.timer)
                    this.$UEditor.addListener('contentChange', () => {
                         // 延迟更新，主要针对图片显示不出的问题
                        this.timer = setTimeout(() => {
                            this.$emit('update:content', this.$UEditor.getContent())
                        }, 1000)
                    })
                }, 500)
            },
            refreshHtml() {
                if(this.$UEditor){
                    if(!this.content){ return; }
                    this.$UEditor.setContent(this.content);
                }
            },
            getContent() {
                return this.$UEditor.getContent()
            }
        },
        created() {
            this.$nextTick().then(() => {
                this.initUE()
                // this.loadUeditor().then(() => {
                // });
            });
        },
        destroyed() {
            this.$UEditor.destroy()
        },
        
    }
</script>

<style scoped>

</style>